<template>
    <div class="open-success" v-if="show_show">
        <div id="open-success" v-show="show_show" :class="open_success_class">
            <!--S红包所属用户-->
            <div id="owner"><img class="header" v-lazy="red.owner_header" />
                <span>{{red.owner_nickname}}的红包</span>
            </div>
            <!--E红包所属用户-->

            <!--S红包金额-->
            <div id="red-money">
                <p class="money"><span>{{money}}</span>元</p>
                <p class="hint">
                    <template v-if="to_go === 1">已存入余额，可提现至微信钱包</template>
                    <template v-else>已存入微信零钱，可直接消费</template>
                </p>
                <p class="help" v-if="share">
                    已帮助“{{share.nickname}}”开到{{share.money}}元红包
                </p>
            </div>
            <!--E红包金额-->

            <!--S卡券列表-->
            <div id="coupon" v-if="coupon">
                <router-link to="/home/card-bag">
                    <h2>恭喜您获得一张卡券，已存入卡包，点击查看</h2>
                    <coupon class="coupon" :data="coupon">
                    </coupon>
                </router-link>
            </div>
            <!--E卡券列表-->

            <!--S关闭-->
            <div id="close" @click="$emit('close')">
                <i class="iconfont icon-guanbi"></i>
            </div>
            <!--E关闭-->
        </div>
    </div>
</template>

<script>
import Coupon from "@c/coupon";
export default {
    name: "open-success",
    components: {
        Coupon
    },
    data() {
      return {
          show_show: false,
          open_success_class: 'close',
          // 金额
          money: "",
          // 金额存入目标 '1'=余额 '2'=微信钱包
          to_go: "1",
          // 分享红包上级奖励金额
          share: null,
          // 卡券信息
          coupon: null
      }
    },
    props: {
        red: {
          type: Object
        },
        is_show: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        is_show(value) {
            this.toggle(value)
        }
    },
    methods: {
        toggle(is_show) {
            if(is_show){
                this.show_show = is_show
                this.getAward()
                setTimeout(() =>{
                    this.open_success_class = 'open'
                },10)
            } else {
                this.open_success_class = 'close'
                setTimeout(() =>{
                    this.show_show = is_show
                },310)
            }
        },
        // 获取红包奖品
        getAward() {
            this.$sendGet("red/record/" + this.red.id)
                .then((res) => {
                    let data = res.data.data
                    this.money = data.money
                    this.to_go = data.to_go
                    if(data.share) {
                        this.share = data.share
                    }
                    if(data.coupon) {
                        this.coupon = data.coupon
                    }
                })
        }
    }
}
</script>

<style scoped lang="less" src="./open-success.less"></style>
